<template>
  <div class="container card">
    <el-form
      ref="ruleFormRef"
      :model="domainFrom"
      :rules="checkDomain(multiLanguages)"
      status-icon
      label-position="top"
    >
      <el-form-item prop="webDomain" :label="multiLanguages('web_domain')">
        <el-input size="large" v-model.trim="domainFrom.webDomain" />
      </el-form-item>
      <el-form-item prop="sbcInIpvFour" :label="multiLanguages('sbc_private_ipv4')">
        <el-input size="large" v-model.trim="domainFrom.sbcInIpvFour" />
      </el-form-item>
      <el-form-item prop="sbcOutIpvFour" :label="multiLanguages('sbc_public_ipv4')">
        <el-input size="large" v-model.trim="domainFrom.sbcOutIpvFour" />
      </el-form-item>
      <el-form-item prop="sbcInIpvSix" :label="multiLanguages('sbc_private_ipv6')">
        <el-input size="large" v-model.trim="domainFrom.sbcInIpvSix" />
      </el-form-item>
      <el-form-item prop="sbcOutIpvSix" :label="multiLanguages('sbc_public_ipv6')">
        <el-input size="large" v-model.trim="domainFrom.sbcOutIpvSix" />
      </el-form-item>
      <el-form-item prop="email" :label="multiLanguages('email_address')">
        <el-input size="large" v-model.trim="domainFrom.email" />
      </el-form-item>
      <el-form-item :label="multiLanguages('create_default_transport')">
        <el-switch v-model="domainFrom.isTransport" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { FormInstance } from "element-plus";
import { initDomainFrom, checkDomain } from "./form";
const props = defineProps<{
  multiLanguages: any;
}>();
/**表单对象 */
const ruleFormRef = ref<FormInstance>();
const domainFrom = reactive(initDomainFrom);
const validate = async () => {
  let isPass = false
  await ruleFormRef.value!.validate(valid => {
    if (valid) {
      isPass = true
    } else {
      isPass = false
    }
  });
  return isPass
};
defineExpose({ validate });
</script>
<style scoped lang="less">
.container {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  .el-form {
    width: 50%;
  }
}
</style>
